<template>
  <div>
    <div class="queryBox">
      <div class="row">
        <div class="left">
          <el-icon>
            <Search />
          </el-icon>
          <span> 筛选搜索 </span>
        </div>
        <div class="right">
          <el-button @click="resetFn">重置</el-button>
          <el-button type="primary" @click="searchHandle(searchParams)"
            >搜索</el-button
          >
        </div>
      </div>
      <div class="row">
        <span>优惠卷名称：</span>
        <el-input v-model="searchParams.name" placeholder="优惠卷名称" />
        <span class="span">优惠卷类型：</span>
        <el-select v-model="searchParams.type" placeholder="全部">
          <el-option label="全场赠卷" :value="0" />
          <el-option label="会员赠卷" :value="1" />
          <el-option label="购物赠卷" :value="2" />
          <el-option label="注册赠卷" :value="3" />
        </el-select>
      </div>
    </div>
  </div>
  <div class="editUser">
    <div class="editUserLeft">
      <el-icon>
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>
    <el-button
      type="primary"
      @click="router.push('/sms/addCoupon')"
      v-permission="'addCoupon'"
      >添加</el-button
    >
  </div>
  <el-table :data="list" style="width: 100%" border>
    <el-table-column align="center" type="selection" />
    <el-table-column prop="id" align="center" label="编号" />
    <el-table-column prop="name" align="center" label="优惠卷名称" />
    <el-table-column align="center" label="优惠卷类型">
      <template #default="{ row }">
        {{ judgeType(row.type) }}
      </template>
    </el-table-column>
    <el-table-column prop="useType" align="center" label="可使用商品">
      <template #default="{ row }">
        {{ judgeproduct(row.useType) }}
      </template>
    </el-table-column>
    <el-table-column prop="minPoint" align="center" label="使用门槛">
      <template #default="{ row }"> 满{{ row.minPoint }}元可用 </template>
    </el-table-column>
    <el-table-column prop="amount" align="center" label="面值">
      <template #default="{ row }"> {{ row.amount }}元 </template>
    </el-table-column>
    <el-table-column prop="platform" align="center" label="适用平台">
      <template #default="{ row }">
        {{ judgeplat(row.platform) }}
      </template>
    </el-table-column>
    <el-table-column min-width="200" align="center" label="有效期">
      <template #default="{ row }">
        {{ row.startTime ? formateTime(row.startTime, row.endTime) : "" }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="状态">
      <template #default="{ row }">
        {{ row.startTime ? validity(row.startTime, row.endTime) : "" }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" min-width="140">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          @click="router.push(`/sms/couponHistory?id=${row.id}`)"
          v-permission="'couponHistory'"
          >查看</el-button
        >
        <el-button
          text
          type="primary"
          @click="router.push(`/sms/addCoupon/?id=${row.id}`)"
          v-permission="'updateCoupon'"
          >编辑</el-button
        >
        <el-button text type="primary" @click="Delete(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>
<script setup lang="ts">
import { Search, Tickets } from "@element-plus/icons-vue";
import { ApiCouponData, ApiDeleteCoupon } from "./api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { formateDate } from "@/utils/index";
import tableData from "@/hooks/tableData";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { ref } from "vue";

// 路由
const router = useRouter();

// 搜索的参数
const searchParams = ref<ICouponParams>({
  name: "",
});

// 删除
const Delete = (id: number) => {
  ApiDeleteCoupon(id).then((res) => {
    if (res.code !== 200) return;
    ElMessage.success("删除成功");
    searchHandle(searchParams.value);
  });
};

// 重置
const resetFn = () => {
  searchParams.value = {};
  reset(searchParams.value);
};

// 定义判断优惠卷类型的方法
const judgeType = (type: number) => {
  if (type == 0) {
    return "全场赠卷";
  } else if (type == 1) {
    return "会员赠卷";
  } else if (type == 2) {
    return "购物赠卷";
  } else {
    return "注册赠卷";
  }
};

// 定义判断可使用商品的方法
const judgeproduct = (useType: number) => {
  if (useType == 0) {
    return "全场通用";
  } else if (useType == 1) {
    return "指定分类";
  } else if (useType == 2) {
    return "指定商品";
  }
};

// 定义判断使用平台的方法
const judgeplat = (platform: number) => {
  if (platform == 0) {
    return "全平台";
  } else if (platform == 1) {
    return "移动平台";
  } else if (platform == 2) {
    return "pc平台";
  }
};

// 处理时间的方法
const formateTime = (start: string, end: string) => {
  return formateDate(start) + "至" + formateDate(end);
};

// 处理有效期
const validity = (start: string, end: string) => {
  if (new Date().getTime() > new Date(formateDate(end)).getTime()) {
    return "已过期";
  } else {
    return "有效";
  }
};

// 使用hooks
const {
  pageSize,
  pageNum,
  total,
  list,
  pageSizeChangeHandle,
  pageChangeHandle,
  searchHandle,
  reset,
} = tableData(ApiCouponData, searchParams.value);
</script>
<style lang="less" scoped>
.queryBox {
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    display: flex;
    padding: 10px 0;

    &:first-child {
      justify-content: space-between;
      align-items: center;
    }
    .span {
      margin-left: 20px;
    }
    &:last-child {
      // width: 400px;
      display: flex;
      justify-content: start;
      align-items: center;
      .el-input {
        width: 230px;
      }
      span {
        font-size: 12px;
        width: 110px;
      }
    }
  }
}

.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}

.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
